import React, { useEffect, useState } from 'react';
import { Button, Table, Switch, Input, notification, Modal, Space } from 'antd'
import { useNavigate, NavLink } from 'react-router-dom';
import "../../../view/Index/CXY/styles/systemswiper.scss"
import * as service from "../../../api/System"
import { CloseCircleOutlined } from '@ant-design/icons';
import ExportJsonExcel from "js-export-excel"
interface Props {

}
const { Search } = Input;
function SystemSwiper(props: Props) {
    var navigate = useNavigate()
    const [data, setData] = useState([])
    var [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 50 });
    useEffect(() => {
        getSwiperlist()
    }, [])
    const getSwiperlist = () => {
        service.swiper_list().then(res => {
            console.log(res)
            setData(res.data.data)
            setPagination({
                ...pagination,
                total: res.data.data.length
            })
        })
    }
    const myDelete = (row: any) => {
        Modal.confirm({
            icon: <CloseCircleOutlined style={{ color: "red" }} />,
            title: '删除标签',
            okText: '确认',
            cancelText: '取消',
            content: '确认要删除吗？',
            onOk() {
                service.swiper_delete({ carouselId: row.carouselId }).then((res) => {
                    console.log(res)
                    getSwiperlist()
                    notification.success({
                        placement: "top",
                        message: "删除成功！"
                    })
                })
            },
        });

    }
    const columns = [
        {
            title: '序号',
            render: (_: any, record: never) => <a>{data.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '图片',
            dataIndex: 'carouselPicture',
            key: 'carouselPicture',
            render: (carouselPicture: any) => {
                return (
                    <>
                        <img src={carouselPicture} alt="" />
                    </>
                )
            }
        },
        {
            title: 'Banner图名称',
            dataIndex: 'carouselName',
            key: 'carouselName',
        },
        {
            title: '发布人',
            dataIndex: 'journalName',
            key: 'journalName',
        },
        {
            title: '发布时间',
            dataIndex: 'carouselTime',
            key: 'carouselTime',
        },
        {
            title: '状态',
            render: (_: any, row: any) => {
                return (
                    <>
                        <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked={row.carouselState} onChange={(value) => { changeCondition(row, value) }} />
                    </>
                )
            }
        },
        {
            title: '操作',
            render: (_: any, row: any) => {
                return (
                    <>
                        <NavLink style={{ marginRight: 10, color: 'blue' }} to="/index/system-editswiper" state={{ row, type: "edit" }}>编辑</NavLink>
                        <span style={{ color: 'red', cursor: "pointer" }} onClick={() => { myDelete(row) }}>删除</span>
                    </>
                )
            }
        },
    ];
    // 修改轮播图状态
    const changeCondition = (row: any, value: any) => {
        service.swiper_condition({ carouselId: row.carouselId, carouselState: value }).then((res1: any) => {
            console.log(res1);
            if (value == true) {
                notification.success({
                    placement: "top",
                    message: "已启用！"
                })
            } else {
                notification.success({
                    placement: "top",
                    message: "已禁用！"
                })
            }
            getSwiperlist()
        })
    };
    const handleChange = (pagi: any) => {
        setPagination(pagi);//更新页码
    }
    const onSearch = (value: string) => {
        console.log(value);
        service.swiper_search({ carouselName: value }).then((res) => {
            console.log(res.data);
            setData(res.data.data)
        })
    };
    let excel = () => {//导出Excel表
        let sheetFilter = ["carouselId", "carouselPicture", 'carouselName', 'journalName', 'carouselTime', "carouselState"]//需要导出的属性，一般列表数据的属性
        let option = { fileName: "", datas: [{}] };
        option.fileName = "轮播图管理";
        option.datas = [
            {
                sheetData: data,//需要导出的数据
                sheetName: "轮播图管理",
                sheetFilter: sheetFilter,
                sheetHeader: ["编号", "图片", "Banner图名称", "发布人", "发布时间", "状态"],//每一列的列头
                columnWidth: [20, 20, 20, 20, 20, 20],//每一列的宽
            }
        ]
        let toExcel = new ExportJsonExcel(option);
        toExcel.saveExcel();

    }
    return (
        <div className='system-swiper'>
            <h4>轮播图管理</h4>
            <div className='swiper-header'>

                {/* <TimeList></TimeList> */}
                <Search placeholder="请输入关键词" allowClear onSearch={onSearch} size="large" style={{ width: 400, marginLeft: 20 }} />
                <Space>
                    <Button size="large" type="primary">
                        <NavLink to="/index/system-editswiper" state={{ type: "add" }}>新增轮播图</NavLink>
                    </Button>
                    <Button size="large" type="primary" onClick={excel}>
                        导出
                    </Button>
                </Space>
            </div>
            <Table
                columns={columns}
                dataSource={data}
                rowKey={(row: any) => row.carouselId}
                pagination={pagination}
                onChange={(pagi) => { handleChange(pagi) }}
            />
        </div>
    );
}

export default SystemSwiper;